<template>
  <span class="e-main">
    <el-popconfirm
      v-if="isShowPop"
      :title="props.title"
      :confirm-button-text="props.submitText"
      :cancel-button-text="props.cancelText"
      :confirm-button-type="props.type"
      :width="props.width"
      @confirm="confirmEvent"
    >
      <template #reference>
        <el-link
          :underline="props.underline"
          :type="props.type"
          v-bind="$attrs"
        >
          <slot>删除</slot>
        </el-link>
      </template>
    </el-popconfirm>
    <el-link
      v-else
      :underline="props.underline"
      :type="props.type"
      v-bind="$attrs"
      @click="$emit('click')"
    >
      <slot />
    </el-link>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'primary'
  },
  underline: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '确认删除该条数据?'
  },
  width: {
    type: [String, Number],
    default: 180
  },
  submitText: {
    type: String,
    default: '是'
  },
  cancelText: {
    type: String,
    default: '否'
  }
})

const emits = defineEmits({
  click: () => true
})

const isShowPop = computed(() => props.type === 'danger')

const confirmEvent = () => {
  emits('click')
}

defineOptions({
  name: 'CEA',
  inheritAttrs: false
})
</script>

<style scoped lang="scss">
.e-main {
  display: inline-block;
  margin-right: 10px;
}
</style>
